<template>
    <view class="rows" :style="{ background: pageData.bgColor, padding: `0 ${pageData.margin * 2}rpx`, '--bgcolor': pageData.foreColor || pageData.bgColor || '#fff' }">
        <view class="styleOne" v-if="!pageData.style">
            <view :style="{ backgroundColor: pageData.foreColor }" class="d-flex" :class="[{ 'j-sa': infoData.length < 4 }, { max: infoData.length > 3 }]">
                <view
                    :class="['d-flex', { one: infoData.length == 1 }, { two: infoData.length == 2 }, { three: infoData.length > 2 }]"
                    v-for="(item, index) in infoData"
                    :key="index"
                    :style="{ '--color': item.backColor }"
                >
                    <view class="left flexac f-column p-re bold600 white">
                        <view>
                            <text>{{ item.unit }}</text>
                            <text class="price">{{ item.price }}</text>
                            <text>{{ item.priElse }}</text>
                        </view>
                        <view class="tit ellipsis text-center">{{ item.title }}</view>
                    </view>
                    <view class="right flexac" v-if="item.receivingStatus">已领取</view>
                    <view class="right flexac" @click="_GETCOUPONS(item.cou_id, item)" v-else>立即领取</view>
                </view>
            </view>
        </view>

        <view class="styleTwo" v-if="pageData.style == 1">
            <view :style="{ backgroundColor: pageData.foreColor }" class="d-flex" :class="[{ 'j-sa': infoData.length < 3 }, { max: infoData.length > 2 }]">
                <view
                    :class="['d-flex', { one: infoData.length == 1 }, { two: infoData.length > 1 }]"
                    v-for="(item, index) in infoData"
                    :key="index"
                    :style="{ '--color2': item.backColor, background: '#fff' }"
                    @click="_GETCOUPONS(item.cou_id, item)"
                >
                    <view class="left flexac p-re bold600" :style="{ background: item.backColor2 }">
                        <view>
                            <text class="price">{{ item.price }}</text>
                            <text class="unit">{{ item.priElse }}</text>
                        </view>
                    </view>
                    <view class="right flex-1 d-flex f-column j-centert" :style="{ background: item.backColor2 }">
                        <view class="tit ellipsis bold600">{{ item.title }}</view>
                        <view class="end" v-if="item.endTime == '0'">永久有效</view>
                        <view class="end" v-else>{{ item.endTime.split(' ')[0] }}到期</view>
                    </view>
                </view>
            </view>
        </view>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>

        <u-popup :show="showPop" mode="center" bgColor="transparent">
            <view class="cont p-re">
                <view class="close p-ab">
                    <u-icon name="close-circle" size="30px" color="#F9F9F9" @click="showPop = false"></u-icon>
                </view>
                <image src="https://imgcdn.mogoie.com/Uploads/diy/img/couBg.png"></image>
                <view class="left p-ab flexac f-column">
                    <view class="price bold600">
                        <text class="size26">{{ couInfo.unit }}</text>
                        <text class="size60 m-left10 m-right10">{{ couInfo.price }}</text>
                        <text class="size26">{{ couInfo.priElse }}</text>
                    </view>
                    <view class="size34 color_33 ellipsis text-center">{{ couInfo.title }}</view>
                </view>
                <view class="right p-ab color_33 flexac f-column">
                    <view class="size26" v-if="couInfo.endTime == '0'">永久有效</view>
                    <view class="flexac f-column size26 line40" v-else>
                        <view>有效期至</view>
                        <view v-if="couInfo.endTime">{{ couInfo.endTime.split(' ')[0] }}</view>
                    </view>
                </view>
                <view class="btn flexac size30 p-ab" @click="toUrl('/userPage/user/discount_coupon')">立即查看</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'coupon',
        props: ['pageData'],
        data() {
            return {
                infoData: [],
                showModal: false,
                showPop: false,
                couInfo: {}
            };
        },
        mounted() {
            this.getBlockInfo();
        },
        methods: {
            async getBlockInfo() {
                const result = await this.$getBlockInfo(this.pageData.list);
                if (!result.count) return;
                this.infoData = result.list?.map((item) => ({
                    ...item,
                    backColor2: this.hexToRgba(item.backColor, 0.1) // 透明处理
                }));
            },
            // 领取优惠券
            _GETCOUPONS(couponsId, item) {
                let vId = uni.getStorageSync('vid');
                if (!vId) {
                    this.showModal = true;
                } else {
                    if (item.receivingStatus) {
                        uni.showToast({
                            icon: 'none',
                            title: '您已经领取过，可前往列表查看',
                            duration: 2000
                        });
                        return;
                    }

                    this.$http
                        .post({
                            url: '/SRA_simMallApi/SortOneCoupons',
                            data: {
                                vId,
                                couponsId
                            }
                        })
                        .then((res) => {
                            if (res.code == 100 && res.data) {
                                this.couInfo = item;
                                this.showPop = true;
                                this.getBlockInfo();
                            } else {
                                uni.showToast({
                                    icon: 'none',
                                    title: res.notice || '领取失败，请稍后再试',
                                    duration: 2000
                                });
                            }
                        });
                }
            },
            hexToRgba(hex, opacity) {
                return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')';
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    .styleOne {
        .left {
            height: 100%;
            border-radius: 12rpx 0 0 12rpx;
            background: var(--color);
        }
        .right {
            height: 100%;
            border-radius: 0 12rpx 12rpx 0;
            background: #f9f9f9;
            writing-mode: vertical-lr;
            text-orientation: upright;
            color: var(--color);
        }
        // 一行一个
        .one {
            width: 684rpx;
            height: 168rpx;
            .left {
                width: 564rpx;
                &::after {
                    // 右半圆
                    content: '';
                    position: absolute;
                    width: 20rpx;
                    height: 40rpx;
                    background: var(--bgcolor);
                    border-radius: 0 20rpx 20rpx 0;
                    top: 50%;
                    left: 0;
                    margin-top: -20rpx;
                }
                text {
                    font-size: 28rpx;
                }
                .price {
                    font-size: 56rpx;
                    margin: 0 8rpx;
                }
                .tit {
                    font-size: 32rpx;
                }
            }
            .right {
                width: 120rpx;
                font-size: 28rpx;
            }
        }
        // 一行两个
        .two {
            width: 332rpx;
            height: 128rpx;
            .left {
                width: 252rpx;
                &::after {
                    content: '';
                    position: absolute;
                    width: 16rpx;
                    height: 32rpx;
                    background: var(--bgcolor);
                    border-radius: 0 16rpx 16rpx 0;
                    top: 50%;
                    left: 0;
                    margin-top: -16rpx;
                }
                .price {
                    font-size: 52rpx;
                    margin: 0 4rpx;
                }
                .tit {
                    font-size: 28rpx;
                }
            }
            .right {
                width: 80rpx;
            }
        }
        // 一行三个或多个
        .three {
            width: 216rpx;
            height: 100rpx;
            .left {
                width: 156rpx;
                &::after {
                    content: '';
                    position: absolute;
                    width: 12rpx;
                    height: 24rpx;
                    background: var(--bgcolor);
                    border-radius: 0 12rpx 12rpx 0;
                    top: 50%;
                    left: 0;
                    margin-top: -12rpx;
                }
                text {
                    font-size: 20rpx;
                }
                .price {
                    font-size: 40rpx;
                    margin: 0 2rpx;
                }
                .tit {
                    font-size: 22rpx;
                }
            }
            .right {
                width: 60rpx;
                font-size: 20rpx;
            }
        }
    }
    .styleTwo {
        .one,
        .two {
            border-radius: 12rpx;
            box-sizing: border-box;
            border: 4rpx solid var(--color2);
            color: var(--color2);
        }
        .one {
            width: 684rpx;
            height: 168rpx;
            .left {
                width: 216rpx;
                height: 100%;
                &::after {
                    // 下半圆
                    content: '';
                    position: absolute;
                    width: 40rpx;
                    height: 20rpx;
                    background: var(--bgcolor);
                    border-radius: 0 0 20rpx 20rpx;
                    top: -4rpx;
                    right: -40rpx;
                    border: 4rpx solid var(--color2);
                    box-sizing: border-box;
                    border-top: 4rpx solid var(--bgcolor);
                }
                &::before {
                    // 上半圆
                    content: '';
                    position: absolute;
                    width: 40rpx;
                    height: 20rpx;
                    background: var(--bgcolor);
                    border-radius: 20rpx 20rpx 0 0;
                    bottom: -4rpx;
                    right: -40rpx;
                    border: 4rpx solid var(--color2);
                    box-sizing: border-box;
                    border-bottom: 4rpx solid var(--bgcolor);
                }
                .price {
                    font-size: 56rpx;
                    margin: 0 8rpx;
                    color: var(--color2);
                }
                .unit {
                    font-size: 28rpx;
                }
            }
            .right {
                // width: 460rpx;
                height: 100%;
                box-sizing: border-box;
                padding-left: 60rpx;
                line-height: 48rpx;
                .tit {
                    font-size: 32rpx;
                }
                .end {
                    font-size: 28rpx;
                }
            }
        }
        .two {
            width: 332rpx;
            height: 128rpx;
            .left {
                width: 104rpx;
                height: 100%;
                &::after {
                    content: '';
                    position: absolute;
                    width: 32rpx;
                    height: 16rpx;
                    background: var(--bgcolor);
                    border-radius: 0 0 16rpx 16rpx;
                    top: -4rpx;
                    right: -32rpx;
                    border: 4rpx solid var(--color2);
                    box-sizing: border-box;
                    border-top: 4rpx solid var(--bgcolor);
                }
                &::before {
                    content: '';
                    position: absolute;
                    width: 32rpx;
                    height: 16rpx;
                    background: var(--bgcolor);
                    border-radius: 16rpx 16rpx 0 0;
                    bottom: -4rpx;
                    right: -32rpx;
                    border: 4rpx solid var(--color2);
                    box-sizing: border-box;
                    border-bottom: 4rpx solid var(--bgcolor);
                }
                .price {
                    font-size: 44rpx;
                    margin-right: 2rpx;
                    color: var(--color2);
                }
                .unit {
                    font-size: 20rpx;
                }
            }
            .right {
                // width: 220rpx;
                height: 100%;
                box-sizing: border-box;
                padding-left: 32rpx;
                line-height: 40rpx;
                .tit {
                    font-size: 26rpx;
                }
                .end {
                    font-size: 22rpx;
                }
            }
        }
    }
    // 横向滑动
    .max {
        width: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        > view {
            margin-left: 20rpx;
            flex-shrink: 0;
            // overflow: hidden;
            &:first-child {
                margin-left: 0;
            }
        }
    }
    // 领取弹出层
    .cont {
        image {
            width: 600rpx;
            height: 460rpx;
        }
        .left {
            width: 336rpx;
            height: 214rpx;
            top: 0;
            left: 30rpx;
            .price {
                color: #e71000;
            }
        }
        .right {
            width: 200rpx;
            height: 214rpx;
            top: 0;
            right: 30rpx;
        }
        .btn {
            width: 300rpx;
            height: 72rpx;
            background: linear-gradient(#ffda60, #ffe7ab, #fed95b);
            border-radius: 36rpx;
            color: #e71000;
            left: 50%;
            transform: translateX(-50%);
            bottom: 100rpx;
        }
        .close {
            top: -80rpx;
            right: -40rpx;
        }
    }
</style>
